<template>
  <div>
    <PicturesBrowser v-if="isShowBrowser" :pictures="photos" @closeBrowser="handleCloseBrowser" />
  </div>
</template>
  
<script>
import PicturesBrowser from "../components/pictures-browser/index.vue";
import { photosApi } from "@/api/api";

export default {
  components: {
    PicturesBrowser,
  },
  data() {
    return {
      // 我想要预览的图片
      photos: [],
      isShowBrowser: false,
      albumId:""
    };
  },
  methods: {
    // 预览图片
    previewPictures() {
      this.isShowBrowser = true;
    },
    // 关闭预览图片
    handleCloseBrowser() {
      this.isShowBrowser = false;
    },
    //根据相册id查询照片
    queryPhotos() {
      photosApi.queryByAlbumId(this.albumId).then((resp) => {
        if (resp.data.code) {
          this.photos = resp.data.data;
          this.isShowBrowser = true; // 确保数据加载后显示组件
        } else {
          this.$message({
            type: "info",
            message: resp.data.errMsg,
          });
        }
      });
    },
  },
  mounted() {
    // 处理参数变化，并更新data中的变量
    this.albumId = this.$route.query.albumId;
    this.queryPhotos();
  },
};
</script>
  
<style scoped lang="scss">
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
  